<template>
  <div class="content">
      <div class="login-box">
        <h1 class="title">数据中台管理系统-管理员</h1>
        <h3>用户名:</h3>     
        <el-input class="user_name" v-model="user_name"></el-input>
        <div class="other-login">
            <button  @click="toLoginUser">用户登录</button>
        </div>  
        <h3>密码:</h3>
        <el-input show-password v-model="password"></el-input> 
        <div class="find-pwd">
            <button  @click="findPwd">找回密码</button>
        </div>
        <div class="btns"> 
            <el-button type="primary">注册</el-button>
            <el-button class="login" @click="login" type="success">登录</el-button>
        </div>                 
      </div>

  </div>
</template>

<script>
    
  export default{
      data(){
          return {
              user_name:"",
              password:"",
              is_show_find_pwd:false,
              email:""
          }
      },

      mounted:function(){

      },
      methods:{
          login(){
              
            this.$ajax({
                method: 'post',
                url: 'user/login',
                data: {
                    "user_name":this.user_name,
                    "password":this.password,
                    "type":"manager"
                }
            }).
            then(res => {
                if(res.data.code==2){
                    this.$message({
                        type: 'success',
                        message: '登录成功'
                    });
                    this.$store.commit('setLoginedUserName',this.user_name);
                    this.$store.commit('setLoginedUserPassword',this.password);
                    this.$store.commit('setIsManager',true);
                    this.$router.push({path:'/index'})
                }else if(res.data.code==-1){
                    this.$message({
                        type: 'error',
                        message: '用户名错误'
                    });                      
                }else if(res.data.code==0){
                    this.$message({
                        type: 'error',
                        message: '密码错误'
                    });                       
                }else{
                    this.$message({
                        type: 'error',
                        message: '未知错误'
                    });                      
                }
                
            });               
              
          },
          toLoginUser(){
              this.$router.push({path:'/login'})
          },
          findPwd(){
            this.$prompt('请输入邮箱', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            }).then(({ value }) => {
            //这里连后端
            this.$message({
                type: 'success',
                message: '密码已发送到邮箱！'
            });                       


            }).catch(() => {
            this.$message({
                type: 'info',
                message: '取消输入'
            });       
            });
          },

      },

  }
</script>


<style lang="scss" scoped>
    .content{
        width: 100%;
        min-height: 100vh;
        background: url('../../imgs/login-bg.png');
    }
    .user_name{
        margin-bottom: 5%;
    }
    .title{
        text-align: center;
    }
    .login-box{
        padding: 2%;
        border-radius: 10px;
        position: absolute;
        top:30%;
        left: 35%;
        background: rgba(255, 255, 255, 0.5);
        width: 30%;
        height: 300px;
    }
    .login-box h3{
        color: #555;
        margin-bottom: 2%;
    }
    .btns{
        margin-top:5%;
        margin-left: 4%;
    }
    .login{
        margin-left: 60%;
    }
    .other-login{
        margin-top:-5%;
        margin-left: 85%;        
    }
    .find-pwd{

        margin-top: 2%;
        margin-left: 85%;
    }
    .find-pwd button{
        cursor:pointer;
        background: rgba(255, 255, 255, 0);
        border: 0;
    }
    .other-login button{
        cursor:pointer;        
        background: rgba(255, 255, 255, 0);
        border: 0;
    }
</style>
